<template>
  <div>
    <!--tab标签页切换标题-->
    <Tabs :option="tabsOption" @change="changeTabsMethods" />
    <!--tab标签页切换内容-->
    <div class="tabsChangeContent">
      <!--余额查询-->
      <div v-show="changeTabOption.prop===0">
        <SimpleData :simple-data="balanceAccountData" :option="balanceOption" />
      </div>
      <!--明细查询-->
      <div v-show="changeTabOption.prop===1">
        <CommonTable
          :option="detailSearchOption"
          :button-self="detailButtonArray"
          :data="detailSearchData"
          :page="pageDetailDetailSearch"
          @selfButton="selfButtonDetail"
          @search="search"
          @sizeChange="sizeChangeDetailSearch"
          @currentChange="currentChangeDetailSearch"
        />
      </div>
      <!--子账户查询-->
      <div v-show="changeTabOption.prop===2">
        <CommonTable
          :option="subAccountOption"
          :data="subAccountData"
          :page="pageDetailSubAccount"
          @search="querySubBank"
          @sizeChange="sizeChangeSubAccount"
          @currentChange="currentChangeSubAccount"
        />
      </div>
      <!--开户行查询-->
      <div v-show="changeTabOption.prop===3">
        <SimpleData :simple-data="openBankData" :option="openBankOption" />
        <el-button type="primary" class="btn btn-primary">短信发送</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from 'axios'
import Tabs from '@/components/common/Tabs'
import SimpleData from '@/components/common/SimpleData'
import CommonTable from '@/components/common/CommonTable'
import CommonDate from '@/components/common/CommonDate'
import { queryLoss } from '@/api/bankBiz/loss/loss'

export default {
  name: 'AccSearch',
  components: {
    Tabs,
    SimpleData,
    CommonTable
  },
  data() {
    return {
      tabsOption: {
        column: [{
          label: '余额查询',
          prop: 0
        }, {
          label: '明细查询',
          prop: 1
        },
        {
          label: '子账户查询',
          prop: 2
        },
        {
          label: '开户行查询',
          prop: 3
        }]
      },
      changeTabOption: {},
      // 余额查询data
      balanceAccountData: {
        'balance': '130000',
        'availableBalance': '23412'
      },
      balanceOption: {
        column: [
          {
            'prop': 'balance',
            'label': '余额',
            'span': 8
          },
          {
            'prop': 'availableBalance',
            'label': '可用余额',
            'span': 8
          }
        ]
      },
      // 明细查询
      detailSearchData: [],
      detailSearchOption: {},
      detailButtonArray: [
        {
          label: '最近10笔',
          prop: 0
        },
        {
          label: '最近10日',
          prop: 1
        }
      ],
      pageDetailDetailSearch: {
        pageSizes: [10, 20, 30, 40],
        currentPage: 1,
        total: 10,
        pageSize: 10
      },
      // 子账户查询
      subAccountData: [],
      subAccountOption: {},
      pageDetailSubAccount: {
        pageSizes: [10, 20, 30, 40],
        currentPage: 1,
        total: 10,
        pageSize: 10
      },
      // 开户行查询data
      openBankData: {
        'name': '中国银行',
        'address': '中国银行潮汕路分行',
        'largeNum': '123',
        'phone': '13245678904'
      },
      openBankOption: {
        column: [
          {
            'prop': 'name',
            'label': '开户行名称',
            'span': 8
          },
          {
            'prop': 'address',
            'label': '开户行地址',
            'span': 8
          },
          {
            'prop': 'largeNum',
            'label': '大额行号',
            'span': 8
          },
          {
            'prop': 'phone',
            'label': '开户行电话',
            'span': 8
          }
        ]
      }
    }
  },
  created() {
    this.changeTabOption.prop = 0
    // 余额查询
    this.quertyBalanceData()
    // 明细查询
    this.search()
    // 子账户查询
    this.querySubBank()
    // 开户行查询
    this.quertyOpenBankeData()
    // 明细查询条件配置
    this.setQueryConditionOption()
    // 子账户查询条件配置
    this.setSubAccountOption()
  },
  methods: {
    // 初始化配置
    //      initOptions () {
    //        this.namespace = this.$route.query['namespace']
    //        this.nameFlag = this.$route.query['nameFlag']
    //        console.log('receive params is: ' + this.namespace + ', ' + this.nameFlag)
    //        if (!this.namespace) {
    //          this.$message.error('namespace不能为空')
    //        }
    //        if (!this.nameFlag) {
    //          this.$message.error('nameFlag不能为空')
    //        }
    //        let viewOptions = personalOptions.viewOption
    //        this.tabsOption = viewOptions[this.nameFlag].tabsOption
    //        this.currencyTable()
    //      },
    // 切换页签
    changeTabsMethods(data) {
      this.changeTabOption = data
      return
      if (data.prop === 0) {
        // 余额查询
        this.quertyBalanceData()
      } else if (data.prop === 3) {
        // 开户行查询
        this.quertyOpenBankeData()
      }
    },
    // 余额查询
    quertyBalanceData() {
      return
      // 调接口
      const balanceAccountParams = {
        namespace: 'Personal',
        key: 'balanceAccountData'
      }
      queryLoss(balanceAccountParams).then((res) => {
        this.balanceAccountData = res.data.data
      })
    },
    // 明细查询配置
    setQueryConditionOption() {
      Axios.post('/api/personalData').then((res) => {
        this.detailSearchOption = res.data.detailSearchOption
      }).catch((err) => {
        console.log(err)
      })
    },
    // 明细查询数据
    search() {
      // 调接口
      const detailSearchParams = {
        namespace: 'Personal',
        key: 'detailSearchData',
        query: {
          pageSize: 10,
          currentPage: 1,
          transferDateStart: '2020-01-01',
          transferDateEnd: '2020-01-02'
        }
      }
      queryLoss(detailSearchParams).then((res) => {
        this.pageDetailDetailSearch.total = res.data.data.totalNum
        this.detailSearchData = res.data.data.dataObj
      })
    },
    // 自定按钮事件
    selfButtonDetail(prop) {
      // 最近10笔
      if (prop == this.detailButtonArray[0].prop) {
        console.log('触发最近10笔查询')
      }
      // 最近10日
      else if (prop == this.detailButtonArray[1].prop) {
        console.log('触发最近10日查询')
      }
    },
    // 子账户查询配置
    setSubAccountOption() {
      Axios.post('/api/personalData').then((res) => {
        this.subAccountOption = res.data.subAccountOption
      }).catch((err) => {
        console.log(err)
      })
    },
    // 子账户查询数据
    querySubBank() {
      // 调接口
      const subAccountParams = {
        namespace: 'Personal',
        key: 'subAccountData',
        query: {
          pageSize: 10,
          currentPage: 1,
          accountType: 'A',
          currency: '美元',
          saveTime: '10年',
          openingDateStart: '2020-01-01',
          openingDateEnd: '2020-01-01'
        }
      }
      queryLoss(subAccountParams).then((res) => {
        this.pageDetailSubAccount.total = res.data.data.totalNum
        this.subAccountData = res.data.data.dataObj
      })
    },
    // 开户行查询
    quertyOpenBankeData() {
      return
      // 调接口
      const openBankParams = {
        namespace: 'Personal',
        key: 'openBankData'
      }
      queryLoss(openBankParams).then((res) => {
        this.openBankData = res.data.data
      })
    },
    // 明细查询数据,切换行数
    sizeChangeDetailSearch(val) {
      this.pageDetailDetailSearch.currentPage = 1
      this.pageDetailDetailSearch.pageSize = val
      this.$message.success('行数' + val)
      // 调接口
      const detailSearchParams = {
        namespace: 'Personal',
        key: 'detailSearchData',
        query: {
          pageSize: val,
          currentPage: 1,
          transferDateStart: '2020-01-01',
          transferDateEnd: '2020-01-02'
        }
      }
      queryLoss(detailSearchParams).then((res) => {
        this.pageDetailDetailSearch.total = res.data.data.totalNum
        this.detailSearchData = res.data.data.dataObj
      })
    },
    // 明细查询数据,切换页码
    currentChangeDetailSearch(val) {
      this.pageDetailDetailSearch.currentPage = val
      this.$message.success('页码' + val)
      // 调接口
      const detailSearchParams = {
        namespace: 'Personal',
        key: 'detailSearchData',
        query: {
          pageSize: this.pageDetailDetailSearch.pageSize,
          currentPage: val,
          transferDateStart: '2020-01-01',
          transferDateEnd: '2020-01-02'
        }
      }
      queryLoss(detailSearchParams).then((res) => {
        this.pageDetailDetailSearch.total = res.data.data.totalNum
        this.detailSearchData = res.data.data.dataObj
      })
    },
    // 子账户查询数据,切换行数
    sizeChangeSubAccount(val) {
      this.pageDetailSubAccount.currentPage = 1
      this.pageDetailSubAccount.pageSize = val
      this.$message.success('行数' + val)
      // 调接口
      const subAccountParams = {
        namespace: 'Personal',
        key: 'subAccountData',
        query: {
          pageSize: val,
          currentPage: 1,
          accountType: 'A',
          currency: '美元',
          saveTime: '10年',
          openingDateStart: '2020-01-01',
          openingDateEnd: '2020-01-01'
        }
      }
      queryLoss(subAccountParams).then((res) => {
        this.pageDetailSubAccount.total = res.data.data.totalNum
        this.subAccountData = res.data.data.dataObj
      })
    },
    // 子账户查询数据,切换页码
    currentChangeSubAccount(val) {
      this.pageDetailSubAccount.currentPage = val
      this.$message.success('页码' + val)
      // 调接口
      const subAccountParams = {
        namespace: 'Personal',
        key: 'subAccountData',
        query: {
          pageSize: this.pageDetailSubAccount.pageSize,
          currentPage: val,
          accountType: 'A',
          currency: '美元',
          saveTime: '10年',
          openingDateStart: '2020-01-01',
          openingDateEnd: '2020-01-01'
        }
      }
      queryLoss(subAccountParams).then((res) => {
        this.pageDetailSubAccount.total = res.data.data.totalNum
        this.subAccountData = res.data.data.dataObj
      })
    }
  }
  // 进入路由初始化配置
//    beforeRouteEnter (to, from, next) {
//      next((vm) => {
//        vm.initOptions()
//      })
//    }
}
</script>

<style scoped>
</style>
